<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>维修端管理</title>
		<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
		<style>
			:root {
				--status-red: #dc3545;
				--status-green: #198754;
				--status-purple: #6f42c1;
			}

			.status-header {
				background: #4a90e2;
				color: white;
				border-radius: 0 0 15px 15px;
			}

			.status-badge {
				position: absolute;
				right: -5px;
				top: -5px;
				width: 24px;
				height: 24px;
				border-radius: 50%;
				font-size: 12px;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.function-card {
				background: white;
				border-radius: 12px;
				padding: 15px;
				box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
				transition: all 0.2s;
				position: relative;
			}

			.nav-bottom {
				height: 56px;
				background: #fff;
				box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
			}

			.icon-wrapper {
				width: 40px;
				height: 40px;
				border-radius: 8px;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 0 auto 8px;
			}

			a {
				text-decoration: none;
			}

			.bottom-nav {
				position: fixed;
				bottom: 0;
				width: 100%;
				background: #fff;
				border-top: 1px solid #e9ecef;
				padding: 10px 0;
			}
		</style>
	</head>
	<body>
		<div class="status-header p-3">
			<div class="d-flex justify-content-between align-items-center mb-4">
				<h5 class="mb-0">维修端</h5>
				<a href="../ShouYe.html"><span class="badge bg-light text-dark">QAQ</span></a>
			</div>

			<!-- 统计卡片 -->
			<div class="row g-3">
				<div class="col-6">
					<div class="function-card">
						<div class="text-muted small">今日申请</div>
						<h4 class="mt-1 fw-bold">10</h4>
					</div>
				</div>
				<div class="col-6">
					<div class="function-card">
						<div class="text-muted small">本月申请</div>
						<h4 class="mt-1 fw-bold">15</h4>
					</div>
				</div>
			</div>
		</div>

		<!-- 故障维修模块 -->
		<div class="p-3">
			<div class="d-flex justify-content-between align-items-center mb-3">
				<h6 class="mb-0">故障维修</h6>
				<a href="#" class="text-decoration-none small">全部工单</a>
			</div>

			<div class="row g-3">
				<!-- 待指派 -->
				<div class="col-4">
					<a href="DaiPaiDan.html">
						<div class="function-card text-center">
							<div class="icon-wrapper bg-primary">
								<i class="bi bi-person-up text-white fs-5"></i>
							</div>
							<div class="small">代派单</div>
							<div class="status-badge bg-danger text-white">10</div>
						</div>
					</a>
				</div>

				<!-- 处理中 -->
				<div class="col-4">
					<a href="ChuLiZhong.html">
						<div class="function-card text-center">
							<div class="icon-wrapper bg-primary">
								<i class="bi bi-folder text-white fs-5"></i>
							</div>
							<div class="small">处理中</div>
							<div class="status-badge bg-danger text-white">2</div>
						</div>
					</a>
				</div>

				<!-- 待审核 -->
				<div class="col-4">
					<a href="DaiShenHe.html">
						<div class="function-card text-center">
							<div class="icon-wrapper bg-success">
								<i class="bi bi-folder text-white fs-5"></i>
							</div>
							<div class="small">待审核</div>
							<div class="status-badge bg-danger text-white">2</div>
						</div>
					</a>
				</div>

				<!-- 待支付 -->
				<div class="col-4">
					<a href="DaiZhiFu.html">
						<div class="function-card text-center">
							<div class="icon-wrapper bg-danger">
								<i class="bi bi-folder text-white fs-5"></i>
							</div>
							<div class="small">待支付</div>
							<div class="status-badge bg-danger text-white">2</div>
						</div>
					</a>
				</div>

				<!-- 施工中 -->
				<div class="col-4">
					<a href="ShiGongZhong.html">
						<div class="function-card text-center">
							<div class="icon-wrapper bg-success">
								<i class="bi bi-arrow-repeat text-white fs-5"></i>
							</div>
							<div class="small">施工中</div>
							<div class="status-badge bg-danger text-white">2</div>
						</div>
					</a>
				</div>

				<!-- 已完成 -->
				<div class="col-4">
					<a href="YiWanCheng.html">
						<div class="function-card text-center">
							<div class="icon-wrapper bg-warning">
								<i class="bi bi-check2-circle text-white fs-5"></i>
							</div>
							<div class="small">已完成</div>
							<div class="status-badge bg-warning text-dark">5</div>
						</div>
					</a>
				</div>

				<!-- 已取消 -->
				<div class="col-4">
					<a href="YiQuXiao.html">
						<div class="function-card text-center">
							<div class="icon-wrapper" style="background: var(--status-purple)">
								<i class="bi bi-x-circle text-white fs-5"></i>
							</div>
							<div class="small">已取消</div>
							<div class="status-badge bg-secondary text-white">2</div>
						</div>
					</a>
				</div>
			</div>
		</div>

		<!-- 创建工单 -->
		<div class="p-3">
			<div class="function-card">
				<div class="d-flex justify-content-between align-items-center">
					<div>
						<div class="text-muted small">维修管理</div>
						<div class="fw-bold">创建工单</div>
					</div>
					<div class="icon-wrapper bg-primary">
						<i class="bi bi-file-plus text-white fs-5"></i>
					</div>
				</div>
			</div>
		</div>
		</div>

		<div class="bottom-nav">
			<div class="container-fluid">
				<div class="d-flex justify-content-around">
					<a href="GuanLiDuan.html" class="nav-item">
						<i class="bi bi-house"></i>
						<span class="fs-7 mt-1">首页</span>
					</a>
					<a href="DaiPaiDan.html" class="nav-item active">
						<i class="bi bi-bug"></i>
						<span class="fs-7 mt-1">报障维修</span>
					</a>
					<a href="" class="nav-item">
						<i class="bi bi-person"></i>
						<span class="fs-7 mt-1">我的</span>
					</a>
				</div>
			</div>
		</div>

		<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
	</body>
</html>